<template>
  <view class="news-page">
    <!-- 自定义导航栏 -->
    <custom-navbar
      :title="'资讯'"
      :background-color="'#FFFFFF'"
	  :showBack="true"
    ></custom-navbar>

    <!-- 资讯列表 -->
    <scroll-view
      class="news-list"
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
      <view class="news-grid">
        <view
          v-for="(item, index) in newsList"
          :key="index"
          class="news-card"
          @click="navigateToDetail(item.id)"
        >
          <view class="news-image">
            <placeholder-image
              :text="item.title"
              :height="200"
              :bg-color="item.bgColor"
            ></placeholder-image>
          </view>
          <view class="news-info">
            <view class="news-title">{{ item.title }}</view>
            <view class="news-desc">{{ item.desc }}</view>
            <view class="news-meta">
              <text class="date">{{ item.date }}</text>
              <text class="views">{{ item.views }}阅读</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state">
        <text v-if="isLoading">正在加载更多...</text>
        <text v-else-if="hasMore === false">已经到底了~</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import CustomNavbar from "@/components/custom-navbar/index.vue";

// 资讯列表数据
const newsList = ref([]);

// 是否正在加载更多
const isLoading = ref(false);

// 是否有更多数据
const hasMore = ref(true);

// 页码
const page = ref(1);

// 是否正在下拉刷新
const isRefreshing = ref(false);

// 下拉刷新相关方法
const onPulling = () => {
  console.log("下拉刷新中...");
};

const onRefresh = () => {
  isRefreshing.value = true;

  // 重置数据和分页
  newsList.value = [];
  page.value = 1;
  hasMore.value = true;

  // 加载数据
  loadNews().then(() => {
    isRefreshing.value = false;
  });
};

const onRestore = () => {
  console.log("下拉刷新结束");
};

const onAbort = () => {
  console.log("下拉刷新中断");
};

// 加载更多数据
const loadMore = () => {
  if (isLoading.value || !hasMore.value) return;

  page.value++;
  loadNews();
};

// 加载资讯数据
const loadNews = () => {
  isLoading.value = true;

  // 模拟异步请求
  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟数据
      const mockData = [];

      // 生成10条数据
      for (let i = 0; i < 10; i++) {
        const id = (page.value - 1) * 10 + i + 1;

        // 如果超过30条，模拟没有更多数据
        if (id > 30) {
          hasMore.value = false;
          break;
        }

        mockData.push({
          id,
          title: `医学资讯${id}`,
          desc: `这是一条关于医学发展的最新资讯，展示了医学领域的最新研究成果和突破性进展（编号：${id}）`,
          date: "2024-03-20",
          views: Math.floor(Math.random() * 1000) + 100,
          bgColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
        });
      }

      // 追加数据
      newsList.value = [...newsList.value, ...mockData];
      isLoading.value = false;

      resolve();
    }, 800); // 模拟网络延迟
  });
};

// 跳转到详情页
const navigateToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/news/detail?id=${id}`,
  });
};

// 页面加载
onMounted(() => {
  loadNews();
});
</script>

<style lang="scss" scoped>
.news-page {
  min-height: 100vh;
  background-color: $uni-bg-color-grey;
}

.news-list {
  height: calc(100vh - 44px - var(--status-bar-height));
  overflow: hidden;
}

.news-grid {
  padding: $spacer-4;
}

.news-card {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  margin-bottom: $spacer-4;
  overflow: hidden;
  box-shadow: $box-shadow-card;
}

.news-image {
  width: 100%;
  height: 200rpx;
}

.news-info {
  padding: $spacer-3;
}

.news-title {
  font-size: $uni-font-size-lg;
  font-weight: 500;
  margin-bottom: $spacer-2;
}

.news-desc {
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
  margin-bottom: $spacer-2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;

  .date {
    margin-right: $spacer-4;
  }
}

.loading-state {
  text-align: center;
  padding: $spacer-4 0;
  color: $uni-text-color-grey;
  font-size: $uni-font-size-sm;
}
</style>
